<template>
    <div @click.stop="handleClick" class="green">
        <span>{{num+childNum}}</span>
        <red :redNum="num" :type="type" @clickRed="clickRed"  ></red>
    </div>
</template>

<script>
import red from "./red.vue";
export default {
    name: "green",
    props: { 
        blueNum: {
            type: Number,
            default:0
        },
    },
    components:{
        red
    },
    data(){
        return {
            num: 0,
            type: 'green',
            childNum: 0,
            count: 0,
            count2:0,
        }
    },
    methods: {
        clickRed() {
            this.childNum++;
            this.count2++
            if (this.count2 === 2) {
                this.$emit('clickBlue')
                this.count2=0
            }
        }, 
        handleClick() {
            this.type = 'green'; 
            this.num++;
            this.count++;
            if (this.count === 2) {
                this.$emit('clickBlue')
                this.count=0
            }
        }
    },
    watch: {
        blueNum(oldV, newV){
            this.type = 'blue'
            this.num+=2
        }
    }
}
</script>

<style scoped>

</style>